<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**
     * setTimeout 模拟 setInterval
     * setInterval 不准确的因素
     * 1、js 单线程，只有一个线程，只有等待上一个任务执行完毕，才会执行下一个任务。如果上一个任务耗时过长，就会导致其误差。
     * 2、事件队列：setInterval 会将任务放入事件队列中，当主线程空闲时，会从事件队列中取出任务执行,也会导致其误差。
     * 3、浏览器选项卡隐藏时不定时执行，setInterval也会导致误差。
     * */
     function customInterval(callback, delay) {
        let timer = null;
        const delayFunc = () => {
            callback();
            timer = setTimeout(delayFunc, delay);
        }
        timer = setTimeout(delayFunc, delay);
        return {
            cancel: function () {
                clearTimeout(timer);
            }
        }
     }
     const customIntervalTimer = customInterval(function () {
         console.log(1);
     },1000)
      setTimeout(function () {
          customIntervalTimer.cancel(customIntervalTimer)
      }, 5000)
</script>
</body>
</html>
